<template>
  <div class="header">
    <div class="header-logo">
      <img src="@assets/images/logo.jpg" />
      两江新区水环境大数据系统
    </div>
    <el-menu
      :default-active="activeIndex"
      class="el-menu-demo"
      mode="horizontal"
      @select="handleSelect"
      background-color="#3670C2"
      text-color="#fff"
      active-text-color="#fff"
    >
      <el-menu-item index="1">环境质量</el-menu-item>
      <el-submenu index="2">
        <template slot="title">我的工作</template>
        <el-menu-item index="2-1">工作1</el-menu-item>
        <el-menu-item index="2-2">工作2</el-menu-item>
        <el-menu-item index="2-3">工作3</el-menu-item>
        <el-submenu index="2-4">
          <template slot="title">工作4</template>
          <el-menu-item index="2-4-1">工作4-1</el-menu-item>
          <el-menu-item index="2-4-2">工作4-2</el-menu-item>
          <el-menu-item index="2-4-3">工作4-3</el-menu-item>
        </el-submenu>
      </el-submenu>
      <el-menu-item index="3">污染源清单</el-menu-item>
      <el-menu-item index="4">知识库</el-menu-item>
      <el-submenu index="5">
        <template slot="title">
          <span>基础数据管理</span>
        </template>
        <el-menu-item-group title="基础数据管理分组1">
          <el-menu-item index="1-1">选项1</el-menu-item>
          <el-menu-item index="1-2">选项2</el-menu-item>
        </el-menu-item-group>
        <el-menu-item-group title="基础数据管理分组2">
          <el-menu-item index="1-3">选项3</el-menu-item>
        </el-menu-item-group>
        <el-submenu index="1-4">
          <template slot="title">选项4</template>
          <el-menu-item index="1-4-1">选项1</el-menu-item>
        </el-submenu>
      </el-submenu>
      <el-menu-item index="6">统计分析</el-menu-item>
      <el-menu-item index="7">系统管理</el-menu-item>
      <!-- right -->
      <el-submenu index="8" style="float: right">
        <template slot="title"
          ><i class="el-icon-user user-icon"></i>超级管理员</template
        >
        <el-menu-item index="8-1">选项1</el-menu-item>
        <el-menu-item index="8-2">选项2</el-menu-item>
        <el-menu-item index="8-3">选项3</el-menu-item>
        <el-submenu index="8-4">
          <template slot="title">选项4</template>
          <el-menu-item index="8-4-1">选项1</el-menu-item>
          <el-menu-item index="8-4-2">选项2</el-menu-item>
          <el-menu-item index="8-4-3">选项3</el-menu-item>
        </el-submenu>
      </el-submenu>
      <el-menu-item index="9" style="float: right"
        ><i class="el-icon-message-solid" style="color: #fff"></i
      ></el-menu-item>
    </el-menu>
  </div>
</template>

<style scoped>
.header {
  display: flex;
  background-color: #3670c2;
  align-content: center;
  height: 60px;
}
.header-logo{
    font-size: 20px;
    color: #fff;
}
.el-menu-demo {
  flex: 1;
}
.header-logo img {
  height: 60px;
  vertical-align: middle;
}
.user-icon{
  color: rgb(255, 255, 255);
  border: 1.5px solid;
  border-radius: 50%;
  width: auto;
}
</style>

<script>
export default {
  data() {
    return {
      menuData: [

      ],
      activeIndex: "1",
    };
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
  },
};
</script>